<template>
    <!-- components/navbar/index.wxml -->
    <view class="navbar custom-class" :style="'height:' + navHeight + 'px; background-color: ' + bgColor + ';'">
        <view class="content" :style="'margin-top:' + navTop + 'px;height: ' + navContentHeight + 'px;'">
            <view v-if="showNav" style="margin-left: 12px">
                <view v-if="isAdv">
                    <view class="navbar-action-wrap navbar-action-group" :style="'top:' + navTop + 'px;background-color:rgba(255,255,255,.6)'">
                        <van-icon
                            v-if="canBack"
                            class-prefix="iconfont"
                            name="fanhuitubiao"
                            :color="iconColor"
                            size="15px"
                            class="navbar-action_item"
                            @tap.native="navBackFun"
                        ></van-icon>
                        <view v-if="canBack" class="splite" />
                        <van-icon v-else class-prefix="iconfont" name="shouye-2" :color="iconColor" size="26px" @tap.native="toIndexFun"></van-icon>
                    </view>
                </view>
                <view v-else style="display: flex; flex-direction: row; align-items: center">
                    <van-icon
                        v-if="canBack"
                        class-prefix="iconfont"
                        name="fanhuitubiao"
                        :color="iconColor"
                        size="22px"
                        class="navbar-action_item"
                        @tap.native="navBackFun"
                    ></van-icon>
                    <van-icon v-else class-prefix="iconfont" name="shouye-2" :color="iconColor" size="26px" @tap.native="toIndexFun"></van-icon>
                </view>
            </view>
            <view class="navbar-title" :style="isLeft ? 'text-align:left' : 'text-align:center'">
                <span :style="'color: ' + titleColor + ';'">{{ pageName }}</span>
            </view>
        </view>
    </view>
</template>

<script>
// components/navbar/index.js
export default {
    data() {
        return {
            canBack: false,
            navHeight: '',
            navTop: '',
            navContentHeight: ''
        };
    },
    options: {
        addGlobalClass: true
    },
    externalClasses: ['custom-class'],
    // mixins: [require('@/behaviors/navi-behavior')],
    /**
     * 组件的属性列表
     */
    props: {
        pageName: String,
        showNav: {
            type: Boolean,
            default: true
        },
        isAdv: {
            type: Boolean,
            default: false
        },
        bgColor: {
            type: String,
            default: '#fff'
        },
        iconColor: {
            type: String,
            default: '#000'
        },
        titleColor: {
            type: String,
            default: '#000'
        },
        //标题是否靠左
        isLeft: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached: function () {
            this.setData({
                canBack: getCurrentPages().length == 1 ? false : true
            });
        },

        // 回退
        navBackFun: function () {
            uni.navigateBack({
                delta: 1
            });
        },

        // 回主页
        toIndexFun: function () {
            console.log('回退首页');
            uni.redirectTo({
                url: '/pages/index/index'
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
